<template>
  <div class="home-container">
    <!--  <hh>
        <van-icon slot="left" name="arrow-left">left</van-icon>
        <van-icon slot="right" name="apps-o" />
    </hh>-->
    <!--  <hh2 
    :title="'首页'" 
    :leftFlag="true"
    :allLeft="true"
    @arrowLeft="toLfet"
    >
    </hh2> -------------------组件封装-------------------------->
    <van-nav-bar>
      <van-button
        slot="title"
        type="info"
        collor="#fff"
        round
        size="small"
        class="search-btn"
        @click="tosearch"
      >
        <van-icon name="search" />搜索
      </van-button>
    </van-nav-bar>
    <!--------------------------- 导航条 ---------------------------------->
    <van-tabs v-model="active" animated swipeable swipe-threshold="4">
      <van-tab
        :title="itemChannel.name"
        v-for="(itemChannel,index) in channelsList"
        :key="index"
        :active="index"
      >
        <!-- 频道列表内容区域 -->
        <articlelist :itemChannel="itemChannel"></articlelist>
      </van-tab>
      <div slot="nav-right" class="placeholder"></div>
      <div slot="nav-right" class="hanbao-btn" @click="hanBaoBtn">
        <i class="iconfont icon-icon-test11"></i>
      </div>
    </van-tabs>

    <!---------------------- 点击汉堡按钮弹出层 -------------------------->
    <van-popup
      v-model="show"
      position="bottom"
      :style="{ height: '100%' }"
      closeable
      close-icon-position="top-left"
    >
      <!--------------- 抽离组件 ------------------>
      <articleedit :myChannels="channelsList" :active="active" @father="activeIndex"></articleedit>
    </van-popup>
  </div>
</template>
           
<script>
import { getChannelsList_api, getArticles_api } from "@/api/login/index";
//下拉列表组件
import articlelist from "@/components/homepage/article-list";
//编辑频道组件
import articleedit from "@/components/homepage/article-edit";
import { GET_TOKEN } from "@/utils/storage";
import { mapState } from "vuex";
export default {
  components: {
    articlelist,
    articleedit
  },
  computed: {
    ...mapState(["user"]) //从仓库获取token，判断是否登录
  },
  data() {
    return {
      active: 2,
      channelsList: [],
      newsList: [],
      show: false,
      localChannels: GET_TOKEN("myChannels") || null
    };
  },
  created() {
    this.getUserlist();
  },
  methods: {
    //组件封装-----------------------------
    /*  toLfet() {
      console.log(1111);
      this.$router.push("/users");
      //  history.go(-1)
    } */
    //搜索事件，跳转到搜索组件----------------
    tosearch() {
      this.$router.push("/search");
    },
    //获取用户频道列表--------------------
    async getUserlist() {
      //需要先判断用户是登录还是未登录
      try {
        if (this.user) {
          //已登录就发请求
          const { data: res } = await getChannelsList_api();
          //  console.log(res,666);
          this.channelsList = res.data.channels;
        } else {
          //未登录就从本地缓存获取,本地缓存有就获取，如果没有还是发请求，从服务器获取
          if (this.localChannels) {
            this.channelsList = this.localChannels;
          } else {
            const { data: res } = await getChannelsList_api();
            this.channelsList = res.data.channels;
          }
        }
      } catch (err) {
        this.$toast("获取失败");
      }
    },
    //  点击频道--------------------------------------------
    /* async changeChannels(name) {
      const { data: res } = await getArticles_api(name)
      console.log(res, 454545454)
      this.newsList = res.data.results
    }, */
    //点击汉堡弹出层事件--------------------------
    hanBaoBtn() {
      this.show = true;
    },
    //点击汉堡列表里的频道，跳转到现在的主页面，根据索引显示具体哪一页
    //默认是true，汉堡打开，如果传过来是false，就关闭
    activeIndex(index, show = true) {
      this.active = index;
      //关闭汉堡弹窗
      this.show = show;
    }
  }
};
</script>
<style scoped lang ="less">
.home-container {
  padding-bottom: 100px;
  /deep/.van-nav-bar__title {
    max-width: unset;
  }
  .van-nav-bar {
    position: fixed;
    width: 100%;
    background-color: #3390ff;
    .search-btn {
      width: 555px;
      height: 64px;
      background-color: #5baafb;
      border: none;
      font-size: 28px;
      padding-left: 40px;
      position: relative;
      .van-icon.van-icon-search {
        color: #fff;
        font-size: 36px;
        position: absolute;
        top: 15px;
        left: 220px;
      }
    }
  }
  /deep/.van-tabs__wrap {
    position: fixed;
    top: 90px;
    z-index: 999;
    width: 100%;
    .van-tab {
      border-right: 1px solid #edeff3;
      min-width: 200px;
      font-size: 32px;
      color: #777777;
    }
    /deep/.van-tab--active {
      color: #333333;
    }
    .van-tabs__line {
      width: 32px;
      height: 6px;
      background-color: #3296fa;
      bottom: 8px;
    }
    .van-tabs__nav {
      padding-bottom: 0;
    }
  }
  .placeholder {
    width: 66px;
    height: 82px;
    flex-shrink: 0;
  }
  .hanbao-btn {
    position: fixed;
    right: 0;
    width: 66px;
    height: 82px;
    line-height: 82px;
    text-align: center;
    background-color: #fff;
    opacity: 0.8;
    i {
      font-size: 50px;
    }
  }
}
</style>